<html>
<head>
    <title>风险责任清单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        img {
            width: 30px;
            width: 32px;
        }

        td {
            text-align: center;
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        td[class=first] {
            width: 100px;
        }

        td[class=first]:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 160px;
            top: 0;
            left: 0;
            background-color: #000;
            display: block;
            transform: rotate(-73deg);
            transform-origin: top;
            -ms-transform: rotate(-73deg);
            -ms-transform-origin: top;
        }

        .title1 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .title2 {
            position: absolute;
            top: 26px;
            right: 70px;
        }

        .el-dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0 !important;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            max-height: calc(100% - 30px);
            width: 100%;
            /*max-width: calc(100% - 30px);*/
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <div class="main-head">

        </div>
        <el-table :data="tableData" :stripe="true" :border="true" size="mini" style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="date" label="发送日期" align="center"></el-table-column>
            <el-table-column prop="title" label="标题" algin="center"></el-table-column>
            <el-table-column prop="people" label="发送人" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center">
            </el-table-column>
            <el-table-column prop="file" label="语音">
                <template slot-scope="scope">
                    <el-button  type="danger" circle  icon="el-icon-microphone" @click="showVoice(scope.row.file)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-footer">
            <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                           :current-page.sync="pageno" @current-change="onChangePage">
            </el-pagination>
        </div>
    </div>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="400"
            :before-close="handleClose" style="display: none">
        <div id="myDivPlayer" style="height: 80px ; width: 380px">

        </div>

    </el-dialog>


</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            headers:{},
            tableData:[],
            pagesize:10,
            totalCount:1,
            pageno:1,
            dialogVisible:false,
        },
        methods: {
            btnSearch:function () {

            },
            onChangePage:function (page) {

            },
            showVoice(file){

             setTimeout(()=>{
                 $('#myDivPlayer').empty();
                 let html_str = '<audio id="video" controls="controls"  style="width:280px;"><source src="'+file+'" /></audio>';
                 $('#myDivPlayer').append(html_str);
             },100)
                this.dialogVisible = true;
            },
            handleClose(done){
                $('#myDivPlayer').empty();
                        done();
            }
        },
        created: function () {
            $('.page').show();
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            };
            this.tableData = [
                {date:'2020-01-13',people: "小左",title:'<<白居易作诗>>',statusText:'',file:"https://ss360rms.oss-cn-beijing.aliyuncs.com/upload/localpath/system/20140414/ff80808144f214c10144fde1fbfd0160/c59c608b-1d1b-4235-9824-5cca4bfa3361.mp3?Expires=1835961016&amp;OSSAccessKeyId=LTAIvLDTQ1WEzElC&amp;Signature=4CoB%2F%2Fyu8Jx6hhpV9w35U0ea1BE%3D"}
            ]
        },
        mounted: function () {
        }
    });


</script>

</body>
</html>
